Тема: [Гайд] Немного о пикселях

Мне уроки, на которые сослался Di.H, показались очень полезными.

Ниже — перевод первых д̶в̶у̶х̶ ч̶е̶т̶ы̶р̶ё̶х̶ девяти гифок. Если кому-то нужны дальнейшие переводы, пишите, могу перевести и остальные. Только желательно указывайте конкретные темы, которые интересуют, а то переводить все гифки долго.

Спойлер «Основы пиксель-арта 1» (Pixel Art Fundamentals 1):

Вот некоторые правила, которым я обычно следую при рисовании пиксельной графики. Я фокусируюсь на облегчении восприятия и уменьшении шума.

• В общем случае я избегаю большого количества блоков пикселей
• Диагональные пиксели плохо соединяются (это не плохо, просто помните об этом)
• Одинокие пиксели — это пиксели, не входящие в блок.
• Если одиноких пикселей слишком много, они добавляют слишком много шума

(Иллюстрация: «блоки пикселей» на примере причёски, ошибка «ненужное псевдосмешение» и исправление «один большой блок» на примере мешка.)

При анимации:

• Учитывайте блоки
• Я стараюсь не разбивать блоки

(Иллюстрация: анимированные люди в балахонах.)

• Одинокие пиксели полезны, чтобы добавить важные детали (иллюстрация: одинокими пикселями выделены глаза и украшение человека в зелёном балахоне)
• Я по возможности избегаю псевдосмешения цветов
• Псевдосмешение может быть полезным, чтобы добавить текстуру (иллюстрация: псевдосмешение цветов на латах воина делает их менее ровными)
• Повторение шаблона облегчает его восприятие (иллюстрация: на самолёте повторяются одни и те же кружочки и полосы)
• Правильные формы легко воспринимать, и они выглядят аккуратно (иллюстрация: выхлоп самолёта сделан правильными формами — кружочками)

Спойлер «Основы пиксель-арта 2» (Pixel Art Fundamentals 2):

Основное о линиях

Правильные прямые линии

• У каждого шага одинаковое число пикселей (иллюстрация: показано, что каждый шаг линии занимает по два пикселя)
• Используйте правильные линии, если это возможно

(Иллюстрация: компьютер, состоящий из большого количества правильных прямых линий.)

Неправильные прямые линии

• Неидеальны, но полезны
• Повторяйте схему с близкими друг к другу числами, например: 2 пикселя, 2 пикселя, 3 пикселя, 2 пикселя, 2 пикселя, 3 пикселя

(Иллюстрация: очертания гор нарисованы неправильными прямыми линиями, в которых повторяются шаги по 1 и по 2 пикселя.)

Кривые

• Каждый шаг должен быть меньше предыдущего до тех пор, пока вы не дойдёте до «угла»
• Затем наоборот увеличивайте длину шага

(Иллюстрация: показано уменьшение шагов на кривой: 4 пикселя, 3 пикселя, 2 пикселя, затем «угол».)

Ошибки в углах

• Шаги линии всегда должны соединяться диагонально
• Такие углы, как показано, создают утолщение на линии (иллюстрации: неправильные углы на рисунках маски и человека в скафандре)

Незапланированные квадраты

• У пикселей есть тенденция образовывать большие квадраты, когда они находятся рядом с другими.
• Чтобы избежать этого, постарайтесь располагать пиксели в порядке кирпичиков (не , а )

(Иллюстрация слева: «неправильный квадрат» на воротнике кота, «неправильные углы» на ухе кота, «неправильная кривая» на мордочке кота, «острый угол» на шее кота. Справа: «всегда ищите мысленные углы» и показано, как их исправлять на примере шарика с крыльями.)

Спойлер «Портреты» (Portraits):

• Начните с приблизительного эскиза-контура. На маленьких разрешениях я люблю работать с цветными линиями.
• Заполните области основными цветами. Заполняйте только большие области, избегайте деталей.
• Закрасьте освещённые области. Также начинайте исправлять детали, ищите ошибки в пропорциях и исправляйет линии (иллюстрация: пример исправления линии: сначала исправляется её толщина, потом закруглённость)
• Добавьте заметные особенности, детали и сгладьте изображение. Я люблю также добавлять чёрный контур для контраста.

(Иллюстрация сверху: 4 шага рисования одного портрета)

Вот некоторые из моих любимых пропорций! (список ниже взят с иллюстрации, не прописан текстом)

• Глаза делят расстояние от верха волос до подбородка на два
• Расстояния от верха волос до лба, от лба до глаз, от глаз до кончика носа, от кончика носа до подбородка примерно одинаковы (и каждый равен 1/4 лица); размер глаз равен размеру носа
• Расстояние от глаз до кончика носа примерно равно расстоянию между зрачками
• Рот делит расстояние от зрачков до подбородка примерно в отношении 1:2

Запомните, что все лица разные.

Выучите базовые пропроции, чтобы вы могли от них отступать (иллюстрация слева: разные формы лиц)

Спойлер «Анимация атаки» (Attack Anim Tutorial и Faking Anticipation):

Урок об анимации атаки

Эта простая анимация атаки состоит из трёх кадров атаки и четырёх кадров возвращения в состояние бездействия (иллюстрация: показана анимация в действии)

Весь секрет в подборе времени

(Иллюстрация: кадр «бездействие 1», затем кадры 2, 3, 4 атаки)

Важно не добавлять кадр подготовки, иначе игроки почувствуют задержку отклика.

(Иллюстрация: кадры 5, 6, 7, 8 анимации)

Кадр 8 — это отскок, поэтому он левее, чем кадр 1.

(Иллюстрация: другие примеры.)



Имитация подготовки

Если меч находится перед первонажем, нужно на первом кадре использовать имитацию подготовки. Для этого можно показать рассечение воздуха.

Спойлер «Анимация бега» (Run Cycle 1 и Top Down Run Cycle):

Цикл бега: простой бег

(Иллюстрация: цикл бега с 8 кадрами и с 16 кадрами.)

Простой цикл бега можно понимать как 4 кадра, которые затем повторяются для другой ноги.

Анимацию можно сделать более плавной, добавляя промежуточные кадры (стрелка показывает на бег с 16 кадрами.)

4 кадра:

• Прыжок: обе ноги в воздухе, поднятая рука всегда с противоположной от ноги стороны (иллюстрация показывает, что это самая высокая позиция).
• Падение: немного опустите поднятые руги и ноги (иллюстрация: эта позиция чуть ниже; ноги и руки расставлены широко).
• Столкновение: удар о землю; выставленная вперёд нога прямая (иллюстрация показывает, что это довольно низкая позиция).
• Восстановление: подготовка к перемене рук и ног. Передняя нога движется назад. Задняя нога движется вперёд. (Иллюстрация: это самая низкая позиция; руки и ноги находятся ближе всего друг к другу.)

Цикл бега, вид сверху

При рисовании спрайтов с видом сверху, представляйте голову, тело и ноги как три фигуры одна над другой. (Иллюстрация: спрайт с видом сверху и три фигуры рядом.)

• Минимальную анимацию бега можно сделать всего на 4 кадрах.
• Вторая половина — это первая, отражённая по горизонтали, за исключением волос и других ассиметричных вещей.

Иллюстрация: подробная и минимальная анимация бега. На подробной версии выделены:

• Кадры прыжка. 3 кадра с вытянутыми ногами и приподнятыми ветром волосами и одеждой.
• Кадры восстановления: 2 кадра перемены ног. Это самая низкая позиция.

Анимации сбоку и со спины следует тем же принципам: 3 кадра прыжка, 2 кадра восстановления.

• Я люблю гипертрофировать движения рук, чтобы сделать их более выразительными. (Иллюстрация: вид со спины)
• Как вариант, вы можете использовать цикл бега для платформеров с некоторыми изменениями (Иллюстрация: вид сбоку)
• Задняя нога большей частью скрыта.

Спойлер «Структура камня» (Rock formations):

Осадочные горные породы (иллюстрация: слева сверху)

• Создан из многослойного материала
• Самый мягкий тип, сильно крошится (иллюстрация: показаны места, где камень раскрошен)
• Большие, мягкие светлые области (показаны на иллюстрации)

Осторожно!

• Избегайте одиноких пикселей и чрезмерного шума
• Не используйте слишком много цветов для деталей

Метаморфические горные породы (иллюстрация: слева сверху)

• Образованы из осадочных или вулканических
• Более сильные светлые области (иллюстрация)
• Твёрдый, ломается на большие куски
• Большие ровные области (иллюстрация)

Вулканические горные породы (иллюстрация: слева снизу и снизу справа)

• Созданы из лавы, расплавленной горной породы
• Обладают округлой формой
• Из-за пузырьков газа у них могут быть дыры и выступающие формы (иллюстрация)
• Могут быть очень пористыми, так что у них очень мягкие светлые области (иллюстрация)

(Процесс рисования камня — иллюстрация сверху справа)

• Начните с силуэта
• Добавьте основные тени
• Добавьте больше слоёв с более мягкой тенью
• Добавьте освещённые области
• Добавьте свет сзади и уменьшите шум
• Крошащиеся части

Спойлер «Жидкость и слизь» (Fluids / Slime):

Жидкость / слизь

Капающая слизь (слева сверху на иллюстрации)

• Ассиметричное начало
• В начале утолщение очень широкое (иллюстрация: 3 кадра слева)
• На каждом кадре капля становится выше и уже
• Чем толще капля жидкости, тем дольше она висит на основной.
• В некоторых случаях она может даже отскакивать назад.

Пузырьки (справа сверху на иллюстрации)

Пузырьки слизи тяжёлые, так что они перемещаются медленно.

• Начинаются широкими (все шаги проиллюстрированы)
• Двигаются медленно
• Ровные формы
• Высокие и тонкие
• Появляются отверстия
• Создаются частицы
• Частицы анимируются по отдельности

Объяснение деталей слизи (иллюстрация в центре)

• Светлые области (2 цвета)
• Основной цвет
• Отражение (1 цвет, тот же, что в светлой области)
• Тень

(Комментарии слева снизу)

• В плотной слизи могут быть переходы и отверстия (на иллюстрации)
• Слизь капает слоями (на иллюстрации)
• Резкая (и маленькая) заметная светлая область

(Комментарии справа снизу)

• Обычно слизи не свойственно разбиваться на частицы
• Избегайте острых углов (не , а )

Спойлер «Зелень, часть 1» (Vegetation, Part 1) — отсутствует по ссылке от Di. H:

Зелень, часть 1

Шаги: Форма → свет → детали (иллюстрация: три шага при рисовании одного дерева)

Форма. я пытаюсь создать силуэт, который воспринимается как дерево, даже без цветов.

Свет.

• Свет должен показывать, что у дерева есть объём.
• Используйте как можно меньше цветов. (иллюстрация: написано «Избегайте» и показаны три ошибки при рисовании освещения)

Детали

• Я стараюсь добавлять детали, не добавляя слишком много шума. (иллюстрация: нарисованное дерево сверху)
• Я избегаю одиноких пикселей.
• Думайте о слоях листвы (иллюстрация: разные слои листвы одного дерева)

Различие краёв и внутренних областей (на иллюстрации стрелки показывают на дерево, листву справа и край травы в центре)

• Детали на краях
• Чёткие внутренние области

Цвета (на иллюстрации справа)

Сверху — тёплые светлые области, снизу — холодные тени.

• Почти половина градиента светло-зелёная.
• Создавайте области, где глаза могут отдохнуть.

(Комментарии справа снизу)

• Используйте один шаблон листьев для единообразия (иллюстрация: шаблон листьев и его применение на кусте)
• Листья падают по синусоиде и вращаются (иллюстрация: листья падают в воду).
• Висящие лианы — это всегда чудесно.
• Повторение шаблонов — хороший способ избежать шума

Если картинка не грузится, см. тут: https://www.patreon.com/posts/vegetation-part-7416630

Спойлер «Зелень, часть 2» (Vegetation, Part 2):

Думайте слоями (иллюстрация: 4 слоя одной земли)

• Светлые области
• Основа
• Тени
• Земля

(Иллюстрация: вид сбоку, как в платформере)

Слева написано «Думайте в 3 измерениях» и показано, как прямоугольный кусочек травы переносится в трёх изменериях
Ниже написано «Свисающие лианы сработают и тут» и показано, как лианы можно использовать в платформерах:
Справа стрелкой отмечен «Лимит столкновений», ниже которого находится то, что расположено ниже персонажа. Над ним находятся «Детали перед игроком».

• Избегайте чрезмерного числа цветов.
• Избегайте одиноких пикселей.
• Избегайте шума.

(Центральная иллюстрация: вид сверху, как в RPG)

• Различная глубина и повторяющиеся формы спасают от монотонности
• Большие пустые области переносят фокус на другие области
• Не добавляйте слишком много деталей.

(Иллюстрация: лист. Вокруг листа земля. У листа есть цвет светлой области, основной цвет и цвет тени.)

• Каждая деталь должна быть размещена сознательно, не просто добавляйте случайные точки
• У границ больше деталей и контраста.

(Иллюстрация: ветвь дерева)

• Дерево обладает текстурой с большим количеством почти параллельным прожилок, таких:
• Тёмные области используют цвет теней и не появляются в высококонтрастных областях

Спойлер «Создание городского фона» (City Backgrounds):

Рисование кирпичей

Начните с основных форм кирпичей, примерно так:

Выберите источник света и добавьте светлые области.

Добавьте точки эрозии и небольшие трещины. Не забудьте про направление света.

В некоторых точках углубьте границы между кирпичами.

Уменьшите контраст, добавив менее выраженный тёмный/светлый оттенок для деталей.

Небо

• Низкий контраст.
• Низкая насыщенность

Рисование общей картины

• Нарисуйте свою идею в общих чертах.
• Выберите источник света и нарисуйте правильные формы.
• Добавьте детали и текстуры.
• Добавьте растения и особенности среды: грязь, дождь, снег...

(Иллюстрация: показаны все шаги рисования)

Особенности цветов на примере

• 2 цвета для неба
• 3 цвета для фона вдалеке
• Малое количество цветов для объектов переднего плана